<template>
	<view class="box">
		<tito class="tito" :title="titoText" lefticon="left" @clickLeft="clickLeft" />
		<view class="corten">
			<view class="title" v-for="(item,index) in ligthList" :key="index" @click="getdetails(item.id)">
				<view class="text">
					<view class="title-text">
						{{item.name}}
					</view>
					<view class="text-ellipsis">
						<rich-text :nodes="item.details"></rich-text>
					</view>
					<view class="time">
						{{item.createTime}}
					</view>
				</view>
				<view class="image">
					<image v-if="item.video" :src="item.video" mode=""></image>
					<image v-else :src="item.logo" mode=""></image>
					<image v-if="item.video" class="bofang" src="../../pages/static/bofang.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tito from "@/components/tito/tito.vue"
	export default {
		components: {
			tito
		},
		data() {
			return {
				titoText: '',
				id: "", //文章Id
				page: 1, //页
				limit: 10, //条 
				ligthList: [], //文章列表
			};
		},
		onLoad(ope) {
			if (ope.titoText) {
				this.titoText = ope.titoText
				this.id = ope.id
			}
			this.getligthList()
			console.log("222");
		},
		onReachBottom() {
			this.page++
			this.getligthList()
		},
		mounted() {
			// this.$nextTick(() => {
			// 	let video = window.document.createElement("view");
			// 	console.log(video,"123123");
				// this.ligthList.forEach(item => {
				// 	if (item.video) {
				// 		let img = this.getVideoBase64(item.video)
				// 		console.log(img, 'img');
				// 		this.$set(item, 'thumbnail', thumbnail);
				// 	}
				// });
			// })
			// console.log("111");
			// this.ligthList.forEach(item => {
			// 	console.log(item.video, 'item.video');
			// 	if (item.video) {
			// 		// let img = this.getVideoBase64(item.video)
			// 		// console.log(img,'img');
			// 		// this.$set(item, 'thumbnail', thumbnail);
			// 	}
			// });
		},
		methods: {
			// getVideoThumbnail(videoUrl) {
			// 	return new Promise((resolve) => {
			// 		console.log(document,typeof document !== 'undefined');
			// 		// 确保在客户端执行
			// 		if (typeof document !== 'undefined') {
			// 			const video = document.createElement('video');
			// 			video.src = videoUrl;
			// 			video.autoplay = false;
			// 			video.muted = true;
			// 			video.controls = false;
			// 			video.addEventListener('loadeddata', () => {
			// 				const canvas = document.createElement('canvas');
			// 				canvas.width = video.videoWidth;
			// 				canvas.height = video.videoHeight;
			// 				const ctx = canvas.getContext('2d');
			// 				ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
			// 				const dataURL = canvas.toDataURL('image/png');
			// 				resolve(dataURL);
			// 			});
			// 		}
			// 	});
			// },
			getVideoBase64(url) { //封面
				let self = this
				let dataURL = '';
				let img = ''
				let video = document.createElement("video");
				video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
				video.setAttribute('src', url);
				video.setAttribute('width', 400);
				video.setAttribute('height', 240);
				video.currentTime = 1; // 这里是截取第几帧
				video.addEventListener('loadeddata', function() { //创建虚拟视频组件拿第一帧
					let canvas = document.createElement("canvas")
					let width = video.width //canvas的尺寸和图片一样
					let height = video.height
					canvas.width = width;
					canvas.height = height;
					canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
					dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
				});
				console.log(dataURL, 'dataURL');
				return self.changimg(dataURL)
			},
			changimg(val) { //base64转图片
				// Base64编码的字符串
				var base64Str = val
				// 创建一个Image对象
				var img = new Image();
				// 设置Image的src为Base64编码的字符串
				img.src = base64Str;
				// 将Image对象绘制到Canvas上
				var canvas = document.createElement('canvas');
				canvas.width = img.width;
				canvas.height = img.height;
				var ctx = canvas.getContext('2d');
				ctx.drawImage(img, 0, 0);
				// 将Canvas转换为DataURL
				var dataURL = canvas.toDataURL();
				this.imgUrl = dataURL
				return dataURL
			},
			clickLeft() {
				uni.navigateBack()
			},
			//文章列表
			getligthList() {
				let data = {
					articleTypeId: this.id,
					page: this.page,
					limit: this.limit,
				}
				this.$request.get("/water-platform-app-api/home/article/list", data).then(res => {
					console.log(res, '文章列表');
					if (res.data.length > 0) {
						this.ligthList.push(...res.data)
						
					} else {
						uni.showToast({
							title: "没有更多了!",
							icon: "none"
						})
					}
				})
			},
			//详情
			getdetails(id) {
				uni.navigateTo({
					url: "/subpackageA/pages/home/details?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.corten {
		position: relative;
		padding: 0rpx 30rpx;
		box-sizing: border-box;

		.title {
			margin-top: 32rpx;
			height: 214rpx;
			display: flex;
			border-bottom: 1rpx solid #E4E5E6;

			.text {
				flex: 1;
				margin-right: 16rpx;

				.title-text {
					font-size: 28rpx;
					color: #2E3033;
				}

				.text-ellipsis {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #616366;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.time {
					font-size: 24rpx;
					color: #B1B2B2;
					margin-top: 24rpx;
				}
			}

			.image {
				width: 240rpx;
				height: 180rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				overflow: hidden;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.bofang {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					position: absolute;
					top: 62rpx;
					left: 92rpx;
				}
			}
		}

		.title:last-child {
			border-bottom: none;
		}
	}
</style>